<template>
    <div>
        <el-card class="box-card" shadow="never">
            <!--导航栏-->
            <el-page-header @back="back" :content="content">
            </el-page-header>
            <el-form ref="form" class="edit-el-form"  :model="form" :rules="rules" label-width="auto">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="form.title" required></el-input>
                </el-form-item>
                <el-form-item label="简要文" prop="summary">
                    <el-input
                      type="textarea"
                      :rows="2"
                      v-model="form.summary">
                    </el-input>
                </el-form-item>
                <el-form-item label="发布位置" prop="type">
                   <el-radio-group v-model="form.type" size='small' border @change="handleChange">
                         <el-radio-button v-for="item in allnewstype" :label="item.value" :key="item.value">{{item.label}}</el-radio-button>
                   </el-radio-group>
                </el-form-item>
                <el-form-item label="所属社区" v-if="showCId" prop="c_id">
                   <el-select v-model="form.c_id" placeholder="请选择社区">
                       <el-option
                               v-for="item in allcommunitylist"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                       </el-option>
                   </el-select>
                </el-form-item>
                <el-form-item label="行政类型" v-if="showGuideType" prop="guide_type">
                    <el-radio-group v-model="form.guide_type" size='small' border>
                          <el-radio-button  label="1">行政许可</el-radio-button>
                          <el-radio-button  label="2">行政处罚</el-radio-button>
                          <el-radio-button  label="3">行政办事</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input v-model.number="form.sort" required>
                      <template slot="append">注：排序越大越靠前，默认100</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="是否置顶" prop="show_top">
                    <el-switch
                      v-model="form.show_top"
                      active-value='1'
                      inactive-value='0'
                      active-color="#13ce66">
                    </el-switch>
                </el-form-item>
                <el-form-item label="封面图片" prop="cover_img">
                    <Upload :limit="1" :file_list="cover_img_list" :catch_urls="catch_urls" :remove_urls="remove_urls" :upload_tip="upload_tip"></Upload>
                </el-form-item>
                <el-form-item label="内容" prop="content">
                      <Editor :catchData="catchData" :child_content="child_content"></Editor>
                </el-form-item>
                <el-form-item label="状态">
                    <el-radio-group v-model="form.enabled">
                        <el-radio border label="0">禁用</el-radio>
                        <el-radio border label="1">正常</el-radio>
                    </el-radio-group>
                </el-form-item>

                <!--查看不展示按钮-->
                <el-form-item v-if="edit_type!=0">
                    <el-button type="primary" @click="submitForm('form')" :loading="loading">{{button_name}}</el-button>
                    <el-button @click="back">取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>

    </div>
</template>

<script>
    import Editor from '@/components/Editor.vue';
    import Upload from '@/components/Upload.vue';
    import { getNewsInfo,editNews } from '@/api/news.js';
    import {  getAllCommunityList } from '@/api/community.js';
    export default {
        name:'NewsEdit',
        components:{Editor,Upload},
        data() {
            return {
                form: {
                    title: '',
                    summary:'',
                    type: '1',
                    c_id:'',
                    guide_type:'1',
                    sort: 100,
                    show_top: '0',
                    cover_img:'',
                    content:'',
                    enabled: '1',
                },
                //校验规则
                rules:{
                    title: [
                        { required:true , message:'请输入标题',trigger:'blur' }
                    ],
                    sort:[
                        { required:true , message:'请输入排序号',trigger:'blur' },
                        { type:'number' , message:'排序号必须为数字'}
                    ]
                },
                //加载组件
                loading: false,
                button_name:'立即提交',
                content:'资讯添加',
                child_content:"",
                //封面图片
                cover_img_list:[],
                image_urls:[],
                upload_tip:'只能上传jpg/png/gif文件，且不超过500kb，仅允许上传一张',
                showGuideType:false,
                showCId:false,
                allnewstype:this.$store.state.allnewstype,
                allcommunitylist:[]
            }
        },
        methods: {
            submitForm(formName){
                let that = this;
                    this.$refs[formName].validate((valid) => {
                            if (valid) {
                                if(this.form.content==''){
                                    this.$message({
                                        message:'请输入内容',
                                        type:'error',
                                        duration:1000,
                                    });
                                    return false;
                                };
                                this.loading=true;
                                this.button_name='正在提交';
                                if(that.image_urls.length>0){
                                   that.form.cover_img=that.image_urls[0];
                                }
                                let send_data={
                                    api_token:this.$store.getters.getSessionId,
                                    title:this.form.title,
                                    summary:this.form.summary,
                                    type:this.form.type,
                                    c_id:this.form.c_id,
                                    guide_type:this.form.guide_type,
                                    sort:this.form.sort,
                                    show_top:this.form.show_top,
                                    cover_img:this.form.cover_img,
                                    content:this.form.content,
                                    enabled:this.form.enabled
                                };
                                if(this.id!=-1){
                                    send_data.id=this.id;
                                }
                                editNews(send_data).then(function(response){
                                     let code=response.data.code;
                                     let type=code==1?'success':'error';
                                     let msg=code==1?'成功':'失败';
                                     that.$message({
                                         message:that.content+msg,
                                         duration:1200,
                                         type:type,
                                         onClose:function(e){
                                             that.loading=false;
                                             if(code==1){
                                                that.$router.push('/newslist');
                                             }else{
                                                that.button_name='立即提交';
                                             }
                                         }
                                    })
                                })
                            }else{
                                setTimeout(()=>{
                                  const is_error=document.getElementsByClassName('is-error');
                                  is_error[0].querySelector('input').focus();
                                },100);
                                return false;
                            }
                    })
            },
            back(){
                this.$router.go(-1);
            },
            //富文本内容
            catchData(e){
               this.form.content=e;
            },
            catch_urls(url){
              this.image_urls.push(url);
            },
            remove_urls(remove_index){
              this.image_urls.splice(remove_index,1);
            },
            handleChange(e){
               if(e!=3){
                 this.showCId=false;
                 this.form.c_id='';
                 return;
               }
               this.showCId=true;
            },
            getNewsInfo(){
              if(this.id!=-1){
                  var send_data={
                      api_token:this.$store.getters.getSessionId,
                      id:this.id
                  }
                  let that=this;
                  getNewsInfo(send_data).then(function(response){
                    if(response.data.code==1){
                      let val=response.data.info;
                      that.form.title=val.title;
                      that.form.summary=val.summary;
                      that.form.type=val.type;
                      that.form.sort=val.sort;
                      that.form.show_top=val.show_top.toString();
                      that.form.cover_img=val.cover_img;
                      that.image_urls=[val.cover_img];
                      that.form.content=val.content;
                      that.form.enabled=val.enabled.toString();
                      that.child_content=val.content;
                      if(val.type==3){
                          that.showCId=true;
                          that.form.c_id=val.c_id;
                      }
                      that.cover_img_list.push({
                         name:0,
                         url:val.cover_img
                      });
                    }
                  })
              }
            }
        },
        created(){
            //修改标题
            if(this.edit_type==1){
                this.content='资讯添加';
            }else if(this.edit_type==0){
                this.content='资讯详情';
            }else if(this.edit_type==2){
                this.content='资讯编辑';
            }
            let send_data={
               api_token:this.$store.getters.getSessionId
            };
            let that=this;
            getAllCommunityList(send_data).then(function(response){
               that.allcommunitylist=response.data.list;
               that.getNewsInfo();
            })
        },
        computed:{
            id(){
                return this.$route.params.id;
            },
            edit_type(){
                return this.$route.params.edit_type;
            }
        }
    }
</script>

<style>
    .edit-el-form{
        margin-top:30px;
    }
</style>
